<template>
  <div class="vm">
    <div ref="map" class="map-x"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import TileLayer from "ol/layer/Tile";
import proj4 from "proj4";
import { Projection, addProjection } from "ol/proj";
import { register } from "ol/proj/proj4";
import XYZ from "ol/source/XYZ";
import TileGrid from "ol/tilegrid/TileGrid.js";
const origins = [
  [119.16461660400012, 28.7901552089999],
  [119.16461660400012, 28.7901552089999],
  [119.16461660400012, 28.6533085949999],
  [119.16461660400012, 28.6533085949999],
  [119.16461660400012, 28.6190969415001],
  [119.16461660400012, 28.6190969415001],
  [119.16461660400012, 28.6105440281251],
  [119.16461660400012, 28.610544028124],
  [119.16461660400012, 28.6105440281262],
  [119.16461660400012, 28.6094749139543],
  [119.16461660400012, 28.6094749139455],
];
const resolutions = [
  0.0021382283437496,
  0.0010691141718748,
  0.0005345570859374,
  0.0002672785429687,
  0.0001336392714844,
  0.0000668196357422,
  0.0000334098178711,
  0.0000167049089355,
  0.0000083524544678,
  0.0000041762272339,
  0.0000020881136169,
];
let projection, tileGrid;
tileGrid = new TileGrid({
  origins: origins,
  resolutions: resolutions,
});
export default {
  data() {
    return {
      map: null, // 地图
    };
  },

  methods: {
    initTile() {
      // xy行列转换
      function convert_(zoomLevel, x, y) {
        debugger;
        var extent = Math.pow(2, zoomLevel);
        if (x < 0 || x > extent - 1) {
          console.log("The X coordinate is not sane: " + x);
          return;
        }
        if (y < 0 || y > extent - 1) {
          console.log("The Y coordinate is not sane: " + y);
          return;
        }
        // openlayers 6.0版本
        var gridLoc = [x, extent - y, zoomLevel];

        // openlayers 4.5版本
        // var gridLoc = [x, extent - y + 1, zoomLevel];
        return gridLoc;
      }

      /**
       * 拼接
       */
      function zeroPadding(number, order) {
        var padding = "";
        var numberOrder = 1; // 当前x需要几位数存储
        if (number > 9) {
          if (number > 11) {
            numberOrder = parseInt(Math.ceil(Math.log10(number) - 0.001));
          } else {
            numberOrder = 2;
          }
        }
        let diffOrder = order - numberOrder;
        if (diffOrder > 0) {
          while (diffOrder > 0) {
            padding += "0";
            diffOrder--;
          }
          padding += number; // toString() + Long.toString(number);
        } else {
          padding += number;
        }
        return padding;
      }
      function getleve1(z, x, y) {
        debugger;
        var shift = z / 2;
        var half = 2 << shift;
        var digits = 1;
        if (half > 10) {
          // digits = parseInt(Math.log10(half)) + 1
          digits = parseInt(Math.log(half) / Math.log(10)) + 1;
        }
        var halfx = parseInt(x / half);
        var halfy = parseInt(y / half);
        // const c1=zeroPadding(halfy, digits)+ "_";
        // const c2 =zeroPadding(halfx, digits) +  "/";
        // const c3 =zeroPadding(y, 2 * digits)+ "_";
        // const c4 =zeroPadding(x, 2 * digits)
        const c1 = zeroPadding(halfx, digits) + "_";
        const c2 = zeroPadding(halfy, digits) + "/";
        const c3 = zeroPadding(x, 2 * digits) + "_";
        const c4 = zeroPadding(y, 2 * digits);
        return c1 + c2 + c3 + c4;
      }
      var source = new XYZ({
        // projection: projection,
        tileGrid: tileGrid,
        tileUrlFunction: function(xyz, obj1, obj2) {
          debugger;
          if (!xyz) {
            return "";
          }
          debugger;
          var z = xyz[0];
          var x = Math.abs(xyz[1]);
          var y = Math.abs(xyz[2]);
          var urlTile = getleve1(z, x, y);
          var url =
            "./songyang_songyang/songyang_0" + z + "/" + urlTile + "." + "png";
          return url;
        },
      });
      var offlineTile = new TileLayer({
        source: source,
      });
      this.map.addLayer(offlineTile);
    },
    initMap() {
      // proj4.defs(
      //   "EPSG:4326",
      //   'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4326"]]'
      // );
      // register(proj4);
      projection = new Projection({
        code: "EPSG:4326",
        units: "degrees",
        axisOrientation: "neu",
      });
      projection.setExtent([
        119.16461660400012,
        28.242768753000064,
        119.71200306000001,
        28.609175025000045,
      ]);
      // projection.setWorldExtent([-180, -90, 180, 90]);
      debugger;
      // projection.setDefaultTileGrid = tileGrid;
      addProjection(projection);
      debugger;
      let raster = new Tile({
        source: new OSM(),
      });

      this.map = new Map({
        target: this.$refs.map,
        layers: [raster],
        view: new View({
          projection: "EPSG:4326",
          center: [119.443298, 28.400743],
          zoom: 6,
        }),
      });
      this.initTile();
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style></style>
